<template>
  <el-dialog
    :model-value="dialogFormVisible"
    :title="title"
    align-center
    draggable
    width="43%"
    style="border-radius: 10px; padding: 5px 10px"
  >
    <el-form :model="form" label-width="120px" :rules="rules">
      <el-form-item label="条目名称">
        <el-select 
        filterable
          remote v-model="form.scoreId" placeholder="请选择评分条目" style="width: 210px">
          <el-option
            v-for="(item, index) in ScoreRuleList"
            :label="item.target"
            :key="index"
            :value="item.id"
          >
            {{ item.target }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="评分占比">
        <el-input v-model="form.percent" style="width: 210px" />&nbsp;&nbsp;%
      </el-form-item>
      <el-form-item
        v-for="(person, index) in form.personList"
        :key="index"
        :label="'考核人员' + (index + 1)"
        :prop="'personList.' + index + '.value'"
      >
        <div>
          <el-select
          style="width: 210px;margin-right:10px;"
            v-model="person.unit"
            placeholder="请选择考核人员层级"
            @change="AssessorsGet($event, index)"
          >
            <el-option label="一级单元CEO" value="1" />
            <el-option label="二级单元CEO" value="2" />
            <el-option label="三级单元CEO" value="3" />
            <el-option label="四级单元CEO" value="4" />
			<el-option label="普通员工" value="5" />
          </el-select>
        </div>
        <div>
          <el-select 
          filterable
          remote
          style="width: 210px;"
          v-model="person.assessorId" placeholder="请选择考核人员">
            <el-option
              v-for="(item, index) in assessorList"
              :label="item.name"
              :key="index"
              :value="item.id"
            >
              {{ item.name }}
            </el-option>
          </el-select>
        </div>
        <div>
          <el-input
            v-model="person.percent"
            style="width: 210px"
            placeholder="请填写考核人员评分百分比"
          />&nbsp;&nbsp;%
        </div>
        <el-col :span="7" class="text-center">
          <el-button
            @click.prevent="removeDomain(index)"
            type="primary"
            icon="Minus"
            circle
            style="margin-left: 20px"
            size="large"
          />
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button
          @click="addDomain"
          type="primary"
          icon="Plus"
          size="large"
          circle
        />
      </el-form-item>
      <el-form-item label="是否启用">
        <el-switch v-model="form.state" />
      </el-form-item>
      <el-form-item label="备注说明" class="ins">
        <el-input v-model="form.ins" type="textarea" style="width: 430px" class="ins" />
      </el-form-item>
      <el-form-item>
        <el-button style="width: 150px" type="primary" @click="submitForm"
          >确定</el-button
        >
        <el-button style="width: 150px" @click="onClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {
  ref,
  onBeforeMount,
  reactive,
  defineProps,
  defineEmits,
  watch,
} from "vue";
import { getRulelist, addAssessor } from "@/api/score";
import { getOneScoreAssessorList, updateAssessor } from "@/api/score";
import { getAssessor, getEmpList } from "@/api/employee";
import { ElMessage } from "element-plus";

const form = reactive({
  id: "",
  scoreId: "",
  positionId: "",
  percent: "",
  personList: [
    {
      key: 1,
      assessorId: "",
      percent: "",
      unit: "",
    },
  ],
  state: true,
  ins: "",
});

const dialogFormVisible = ref(true);
const props = defineProps({
  dialogFormVisible: {
    type: Boolean,
    required: true,
  },
  fourthId: {
    type: Number,
    required: true,
  },
  id: {
    type: Number,
    required: true, //是否规定必须得有
  },
  close: {
    type: Function,
    default: () => {},
  },
  update: {
    type: Function,
    default: () => {},
  },
  type: {
    type: Number,
    required: true,
  },
  selectContent: {
    type: Object,
    required: true,
  },
  dialogType: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
});

const ScoreRuleList = ref();
onBeforeMount(() => {
  getRulelist().then((data) => {
    ScoreRuleList.value = data.data;
  });
});

watch(props, (newValue, oldValue) => {
  if (newValue.dialogType == "add") {
    form.id=""
    form.scoreId = newValue.selectContent.scoreId;
    form.positionId = newValue.selectContent.positionId;
    form.percent = newValue.selectContent.percent;
    form.personList.splice(0,form.personList.length);
    form.personList[0] = {
      key: 1,
      assessorId: "",
      percent: "",
      unit: "",
    };
    form.state = newValue.selectContent.state;
    form.ins = newValue.selectContent.ins;
  } else if (newValue.dialogType == "edit") {
    form.id = newValue.selectContent.positionScoreId;
    form.scoreId = newValue.selectContent.scoreId;
    form.positionId = newValue.selectContent.positionId;
    form.percent = newValue.selectContent.scorePercent;
    form.state = newValue.selectContent.scoreState == 1 ? true : false;
    form.ins = newValue.selectContent.ins;
    let positionId = newValue.selectContent.positionId;
    let scoreId = newValue.selectContent.scoreId;

    assessorList.value = [];
    getEmpList().then((data) => {
      for (let i = 0; i < data.data.length; i++) {
        assessorList.value.push({
          name: data.data[i].name,
          id: String(data.data[i].id)
        });
      }
    });
    getOneScoreAssessorList({ positionId, scoreId }).then((data) => {
      form.personList = [];
      for (let i = 0; i < data.data.length; i++) {
        form.personList.push({
          key: i + 1,
          assessorId: data.data[i].assessorId,
          percent: data.data[i].assessorPercent,
          unit: "",
        });
      }
    });
  }
});

const onClose = () => {
  props.close();
};

const removeDomain = (index) => {
  if (form.personList.length>1) {
    form.personList.splice(index, 1);
  }
};
const addDomain = () => {
  form.personList.push({
    key: Date.now(),
    assessorId: "",
    percent: "",
    unit: "",
  });
};

const assessorList = ref([]);
const AssessorsGet = (type, index) => {
  form.personList[index].assessorId = "";
  assessorList.value = null;
  getAssessor(type).then((data) => {
    assessorList.value = data;
  });
};

const submitForm = () => {
  form.positionId = props.id.id;
  if (props.dialogType == "add") {
	//增加考核人占比相加必须为100%
	var total= 0
	for(var i =0;i<form.personList.length;i++){
		total +=  parseFloat(form.personList[i].percent)
	}
	if(total.toFixed(2) != 100){
		ElMessage.error("新增失败,考核人占比总和不为100%");
		return;
	}
	
    addAssessor(form).then((data) => {
      if (data.code == 200) {
        ElMessage({
          message: "新增成功",
          type: "success",
        });
        props.close();
        props.update();
      } else {
        ElMessage.error("新增失败");
      }
    });
  } else if (props.dialogType == "edit") {
	  
	  //增加考核人占比相加必须为100%
	  var total= 0
	  for(var i =0 ; i< form.personList.length; i++){
			total +=  parseFloat(form.personList[i].percent)
	  }
	  
	  
		
	  if(total.toFixed(2) != 100){
	  	ElMessage.error("修改失败,考核人占比总和不为100%");
		return;
	  }
	  
    updateAssessor(form).then((data) => {
      if (data.code == 200) {
        ElMessage({
          message: "修改成功",
          type: "success",
        });
        props.close();
        props.update();
      } else {
        ElMessage.error("修改失败");
      }
    });
  }
};
</script>
<style lang="scss" scoped >
::v-deep .el-form-item__label:before {
  content: "* ";
  color: red;
}
.ins {
  ::v-deep .el-form-item__label:before {
    content: " ";
  }
}
</style>